<template>
  <div>
    <Drawer
        :title="title"
        :closable="true"
        :mask-closable="true"
        @on-close="closeDrawer"
        v-model="drawerFlag"
        width="40"
        :scrollable="true"
      >
        <CellGroup>
                <Cell title="最大分销层级">
                    <Icon type="ios-git-merge" color="#2d8cf0" size="24" slot="icon"/>
                    <Tag color="#2d8cf0" size="large" slot="extra">{{performanceStat.maxLevel || 0}}</Tag>
                </Cell>
                <Cell title="团队总人数">
                    <Icon type="ios-people" color="#ff9900" size="24" slot="icon"/>
                    <Tag color="#ff9900" size="large" slot="extra">{{performanceStat.teamTotal || 0}}</Tag>
                </Cell>
                <Cell title="二级分销总人数">
                    <Icon type="md-people" color="#ed3f14" size="24" slot="icon"/>
                    <Tag color="#ed3f14" size="large" slot="extra">{{performanceStat.secondLevelTotal || 0}}</Tag>
                </Cell>
                <Cell title="三级分销总人数">
                    <Icon type="md-people" color="#E46CBB" size="24" slot="icon"/>
                    <Tag color="#E46CBB" size="large" slot="extra">{{performanceStat.thirdLevelTotal || 0}}</Tag>
                </Cell>
                <Cell title="二、三级分销总业绩">
                    <Icon type="logo-yen" color="#9A66E4" size="24" slot="icon"/>
                    <Tag color="#9A66E4" size="large" slot="extra">{{performanceStat.secondAndThirdPerformance || 0}}</Tag>
                </Cell>
                <Form ref="searchForm" :model="searchForm" :label-width="120">
                <Row>
	<i-col span="24">
	<FormItem label="时间范围"><Row>
	<i-col span="10">
	<FormItem prop="updateTimeMin">
	<DatePicker @on-change="searchForm.beginTime=$event" :value="searchForm.beginTime" placeholder="请输入开始时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
</i-col>
	<i-col span="2" style="text-align: center">-</i-col>
	<i-col span="10">
	<FormItem prop="updateTimeMax">
	<DatePicker @on-change="searchForm.endTime=$event" :value="searchForm.endTime" placeholder="请输入结束时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
</i-col>
<i-col span="2">
  <Button type="default" @click="refreshSecondThirdPerformance">确定</Button>
</i-col>
</Row>
</FormItem>
</i-col>
</Row>
                </Form>
                <Cell title="团队总业绩">
                    <Icon type="logo-yen" color="#187" size="24" slot="icon"/>
                    <Tag color="#187" size="large" slot="extra">{{performanceStat.totalPerformance || 0}}</Tag>
                </Cell>
                <Form ref="searchForm" :model="searchForm" :label-width="120">
                <Row>
	<i-col span="24">
	<FormItem label="时间范围"><Row>
	<i-col span="10">
	<FormItem prop="updateTimeMin">
	<DatePicker @on-change="searchForm.allTeamBeginTime=$event" :value="searchForm.allTeamBeginTime" placeholder="请输入开始时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
</i-col>
	<i-col span="2" style="text-align: center">-</i-col>
	<i-col span="10">
	<FormItem prop="updateTimeMax">
	<DatePicker @on-change="searchForm.allTeamEndTime=$event" :value="searchForm.allTeamEndTime" placeholder="请输入结束时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
</i-col>
<i-col span="2">
  <Button type="default" @click="refreshAllTeamPerformance">确定</Button>
</i-col>
</Row>
</FormItem>
</i-col>
</Row>
                </Form>
                <Cell title="商城订单总佣金">
                    <Icon type="logo-yen" color="#19be6b" size="24" slot="icon"/>
                    <Tag color="#19be6b" size="large" slot="extra">{{performanceStat.totalCommission || 0}}</Tag>
                </Cell>
                <Form ref="searchForm" :model="searchForm" :label-width="120">
                <Row>
	<i-col span="24">
	<FormItem label="时间范围"><Row>
	<i-col span="10">
	<FormItem prop="updateTimeMin">
	<DatePicker @on-change="searchForm.comBeginTime=$event" :value="searchForm.comBeginTime" placeholder="请输入开始时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
</i-col>
	<i-col span="2" style="text-align: center">-</i-col>
	<i-col span="10">
	<FormItem prop="updateTimeMax">
	<DatePicker @on-change="searchForm.comEndTime=$event" :value="searchForm.comEndTime" placeholder="请输入结束时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
</i-col>
<i-col span="2">
  <Button type="default" @click="refreshDistributionAmount">确定</Button>
</i-col>
</Row>
</FormItem>
</i-col>
</Row>
                </Form>
            </CellGroup>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </Drawer>
  </div>
</template>
<script>
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const cdnUrl = config.baseUrl.cdnUrl
export default {
  name: 'DistributionPerformanceStatDrawer',
  props: {},
  data() {
    return {
      title: null,
      drawerFlag: false,
      spinShow: false,
      userId: null,
      performanceStat: {
        maxLevel: 0, 
        teamTotal: 0,
        secondLevelTotal: 0,
        thirdLevelTotal: 0, 
        secondAndThirdPerformance: 0.0,
        totalPerformance: 0.0,
        totalCommission: 0.0
      },
      searchForm: {
        beginTime: '',
        endTime: '',
        allTeamBeginTime: '',
        allTeamEndTime: '',
        comBeginTime: '',
        comEndTime: ''
      }
    }
  },
  mounted() {},
  methods: {
    initPerformanceStat(row) {
      this.drawerFlag = true
      this.spinShow = true
      this.userId = row.userId
      this.title = '分销业绩统计（' + (row.userDetailNickname || row.nickname) + ' ' + (row.userPhone || row.phone) + '）'
      utils.doGet('/distribution/admin/max-level/' + this.userId, {}).then(response => {
        if (response.data.code === ResponseStatus.OK) {
          this.performanceStat.maxLevel = response.data.data
        }
      }).catch(error => {
        console.log(error)
      })
      utils.doGet('/distribution/admin/count-all-below-users/' + this.userId, {}).then(response => {
        if (response.data.code === ResponseStatus.OK) {
          this.performanceStat.teamTotal = response.data.data
        }
      }).catch(error => {
        console.log(error)
      })
      utils.doPostJson('/distribution/admin/below-users-per-level/' + this.userId, [2, 3], {}).then(response => {
        if (response.data.code === ResponseStatus.OK) {
          this.performanceStat.secondLevelTotal = response.data.data[0]
          this.performanceStat.thirdLevelTotal = response.data.data[1]
        }
      }).catch(error => {
        console.log(error)
      })
      this.distributionAmount(this.userId, '', '')
      this.secondThirdPerformance(this.userId, '2,3', '', '')
      this.allTeamPerformance(this.userId, '', '')
      this.spinShow = false
    },
    distributionAmount(userId, beginTime, endTime) {
      utils.doPostQs('/account-detail/admin/distribution-amount-by-time', {
        userId: userId,
        beginTime: beginTime,
        endTime: endTime
      }, {}).then(response => {
        if (response.data.code === ResponseStatus.OK) {
          this.performanceStat.totalCommission = response.data.data
        }
      }).catch(error => {
        console.log(error)
      })
    },
    refreshDistributionAmount() {
      this.distributionAmount(this.userId, this.searchForm.comBeginTime, this.searchForm.comEndTime)
    },
    secondThirdPerformance(userId, levels, beginTime, endTime) {
      utils.doPostQs('/distribution/admin/count-mall-below-performance', {
        userId: userId,
        levels: levels,
        beginTime: beginTime,
        endTime: endTime
      }, {}).then(response => {
        this.performanceStat.secondAndThirdPerformance = response.data.data
      }).catch(error => {
        console.log(error)
      })
    },
    refreshSecondThirdPerformance() {
      this.secondThirdPerformance(this.userId, '2,3', this.searchForm.beginTime, this.searchForm.endTime)
    },
    allTeamPerformance(userId, beginTime, endTime) {
      utils.doPostQs('/distribution/admin/count-mall-all-below-performance', {
        userId: userId,
        beginTime: beginTime,
        endTime: endTime
      }, {}).then(response => {
        this.performanceStat.totalPerformance = response.data.data
      }).catch(error => {
        console.log(error)
      })
    },
    refreshAllTeamPerformance() {
      this.allTeamPerformance(this.userId, this.searchForm.allTeamBeginTime, this.searchForm.allTeamEndTime)
    },
    closeDrawer() {
      this.drawerFlag = false
    }
  }
}
</script>
